<template>
  <div id="register" >
    <el-page-header @back="goBack" content="用户注册" style="margin-top: 15px">
    </el-page-header>

    <div class = "registerShow">
      <el-row><p></p></el-row>
      <span>用户注册</span>
      <el-divider></el-divider>
      <el-form ref="form" :model="form" label-width="100px" label-suffix = ":" :rules="regRules">
        <el-form-item label="用户名" style="margin-left: 5px" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户名" style="width: 255px;margin-right: 80px"></el-input>
        </el-form-item>
        <el-form-item label="密码" style="margin-left: 5px" prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码" style="width: 255px;margin-right: 80px"></el-input>
        </el-form-item>
        <el-form-item label="姓名" style="margin-left: 5px" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名" style="width: 255px;margin-right: 80px"></el-input>
        </el-form-item>
        <el-form-item label="手机号" style="margin-left: 5px" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" style="width: 255px;margin-right: 80px"></el-input>

        </el-form-item>

        <el-form-item label="班级" style="margin-left: 5px" prop="userClassName" >
          <el-input v-model="form.userClassName" placeholder="请输入班级" style="width: 255px;margin-right: 80px" :disabled=isShow></el-input>

        </el-form-item>

        <el-form-item label="入学时间" style="margin-left: 5px" prop="">
          <div class="block" >
            <span class="demonstration"></span>
            <el-date-picker style="width: 255px;margin-right: 80px" :disabled=isShow @change="onTest"
              v-model="form.period"
              type="year"
              placeholder="选择年"
              format="yyyy"
              value-format="yyyy"
            >
            </el-date-picker>
          </div>

        </el-form-item>

        <el-form-item label="性别" prop="" style="margin-left: 5px">
          <el-radio-group v-model="form.sex" style="width: 255px;margin-right: 80px">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="院系" prop="" style="margin-left: 5px">
          <el-select v-model="form.collegeId" placeholder="请选择" style="width: 255px;margin-right: 80px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="职业" prop="userRole" style="margin-left: 5px">
          <el-radio-group v-model="form.userRole" style="width: 255px;margin-right: 80px"  ref="userRole">
            <el-radio label="1" @change="isShow = !isShow">学生</el-radio>
            <el-radio label="2" @change="isShow = !isShow;form.userClassName='';form.period='';">老师</el-radio>
          </el-radio-group>
        </el-form-item>




        <el-form-item>
          <el-button type="primary" @click="onLogin" style="width: 255px;margin-right: 76px" :validate-event="false">注册</el-button>
        </el-form-item>

      </el-form>
    </div>

  </div>


</template>

<script>
  import Axios from 'axios'
  import jwtDecode from "jwt-decode";

  //用axios进行前后端通信
  const instance = Axios.create({
    baseURL: 'http://localhost:8081/api/pri/user',
    timeout: 5000,
  })




  export default {
    name: "register",


    data(){
      return{

        accuracy: 1,
        isShow: false,
        options: [{
          value: '1',
          label: '工学院'
        }, {
          value: '2',
          label: '人文学院'
        }, {
          value: '3',
          label: '音乐学院'
        }, {
          value: '4',
          label: '商学院'
        }],

        form: {
          userName: '',
          password: '',
          name:'',
          phone:'',
          collegeId: '1',
          period: '2021',
          userClassName: '',
          userRole: '1',
          sex: '男',

        },

        regRules: {
          name: [{ required: true, message: '姓名不能为空', trigger: 'blur' },
            { type: 'string',
              message: '请输入正确的姓名格式',
              trigger: 'blur',
              pattern:/^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/
            },
            { type: 'string', message: '长度不能超过30位', trigger: 'blur', max: 30 }
          ],
          phone: [
            { required: true, message: '手机号不能为空', trigger: 'blur'},
            { type: 'string', message: '手机号格式不正确', trigger: 'blur', pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/ },

          ],
          userName: [
            { required: true, message: '用户名不能为空', trigger: 'blur'},
            { type: 'string', message: '长度不能小于6位', trigger: 'blur', min: 6 },
            { type: 'string', message: '长度不能大于13位', trigger: 'blur', max: 13 }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur'},
            { type: 'string', message: '密码必须字母与数字混合', trigger: 'blur', pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+$/},
            { type: 'string', message: '长度不能小于6位', trigger: 'blur', min: 6 },
            { type: 'string', message: '长度不能大于24位', trigger: 'blur', max: 24 }
          ]

        }

      }
    },
    methods: {
      onLogin() {
        instance.post('register', this.from).then(res=> {
          console.log(res.data);
          if (data.code === -1){
            this.$message({
              message: '注册失败，请联系管理员！',
              type: 'error'
            })
          }
          if (data.code === 0){
            this.$message({
              message: '恭喜你,注册成功！',
              type: 'success'
            })
            this.$router.push('/')
          }


        })
      },

      goBack() {
        this.$router.go(-1);
        console.log('go back');
      },

      onTest(){
        console.log(this.form.period);
      }


    },






  }

</script>

<style scoped>

  .registerShow{
    position: absolute;
    top: 50px;
    right: 550px;
    width: 450px;
    height: 750px;
    background-color: #f2f4f6;
    border-radius: 10px;
    text-align: center;
  }

  /*填满屏幕*/
  #register{

  }

  /*#login{*/
  /*  position:absolute;*/
  /*  width:200px;*/
  /*  text-align:right;*/
  /*  top:100px;*/
  /*}*/

  .loginTop{
    height: 100px;
  }
  .divLogin{
    margin: 0 auto;
    width: 100%;
    height: 700px;

  }

  .fade-enter,
  .fade-leave-to {
    transform: translateX(100%);
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: 1s;
  }

  .fade-enter-to {
    transform: translateX(0)
  }
</style>
